{extend name="base"/}
{block name="resources"}
<style>
    .nav-url-show{margin-right: 10px;}
    .ns-form {margin-top: 0;}
    .layui-colorpicker-main-input div.layui-inline{margin-right: 0;}
    .layui-colorpicker-main-input input.layui-input{width: 130px;height: 34px;}
</style>
{/block}
{block name="main"}
<div class="layui-form ns-form">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>名称：</label>
        <div class="layui-input-block">
            <input name="nav_title" type="text" lay-verify="required" class="layui-input ns-len-long">
        </div>
    </div>


    <div class="layui-form-item">
    <label class="layui-form-label">链接：</label>
    <div class="layui-input-block ns-len-mid">
        <span class="nav-url-show"></span>
        <button class="layui-btn layui-btn-primary sm" onclick="selectedLink()">选择链接</button>
    </div>
</div>
<input name="nav_url" type="hidden" />


<div class="layui-form-item">
    <label class="layui-form-label img-upload-lable">图标：</label>
    <div class="layui-input-block">
        <div class="upload-img-block img-upload">
            <div class="upload-img-box">
                <div class="ns-upload-default" id="image">
                    <div class="upload">
                        <img src="ADMIN_IMG/upload_img.png"/>
                        <p>点击上传</p>
                    </div>
                </div>
                <div class="operation"  >
                    <div>
                        <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                        <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                    </div>

                    <div class="replace_img js-replace">点击替换</div>
                </div>
                <input type="hidden" name="image" value="">
            </div>
        </div>
    </div>
    <div class="ns-word-aux">建议宽度<span class="pic_width">100</span>px  建议高度<span class="pic_height">100</span>px</div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">排序：</label>
    <div class="layui-input-block">
        <input name="slide_sort" value="0" type="number" placeholder="排序" lay-verify="num" class="layui-input ns-len-short">
    </div>
    <div class="ns-word-aux">排序值必须为整数</div>
</div>



<div class="ns-form-row">
    <button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
    <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
</div>

</div>
{/block}
{block name="script"}
<script>
    layui.use(['form', 'upload', 'colorpicker'], function () {
        var form = layui.form,
            upload = layui.upload,
            colorpicker = layui.colorpicker,
            repeat_flag = false; //防重复标识
        form.render();

        form.on('select(ap_id)', function(data){
            var type = $(data.elem).find("option:selected").attr("data-type");
            $("[data-type]").hide();
            $("[data-type='"+ type+"']").show();
        });


        // 广告图片
        var logo_upload = new Upload({
            elem: '#image'
        });
        // /**
        //  * 广告图片
        //  */
        // var uploadInst = upload.render({
        // 	elem: '#banner_image',
        // 	url: ns.url("admin/upload/upload"),
        // 	done: function(res) {
        // 		if (res.code >= 0) {
        // 			$("input[name='banner_image']").val(res.data.pic_path);
        // 			$("#banner_image").html("<img src=" + ns.img(res.data.pic_path) + " >");
        // 		}
        // 		return layer.msg(res.message);
        // 	}
        // });

        /**
         * 监听提交
         */
        form.on('submit(save)', function(data) {
            if (repeat_flag) return;
            repeat_flag = true;

            $.ajax({
                url: ns.url("admin/nav/addNav"),
                data: data.field,
                dataType: 'JSON',
                type: 'POST',
                success: function(res) {
                    repeat_flag = false;

                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title:'操作提示',
                            btn: ['返回列表', '继续添加'],
                            yes: function() {
                                location.href = ns.url("admin/nav/lists")
                            },
                            btn2: function() {
                                location.href = ns.url("admin/nav/addNav")
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        });

        /**
         * 表单验证
         */
        form.verify({
            num: function (value) {
                if (value == '') {
                    return;
                }
                if (value%1 != 0) {
                    return '排序数值必须为整数';
                }
                if (value < 0) {
                    return '排序数值必须为大于0';
                }
            },
            flo: function (value) {
                if (value == '') {
                    return;
                }
                var reg = /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/;
                if (!reg.test(value)) {
                    return '价格不能小于0，可保留两位小数！'
                }
            }
        });
    });

    function back() {
        location.href = ns.url("admin/nav/lists")
    }



    function selectedLink() {
        var d = {};
        ns.select_link(d, '', function (data) {
            for (var o in data) {
                if (data[o] == null) delete data[o];
            }

            $("input[name='nav_url']").val(JSON.stringify(data));
            $(".nav-url-show").text(data.title);
        }, 'admin/diy/link');
    }
</script>
{/block}